import React,{useState,useEffect} from 'react'
import {useNavigate} from "react-router-dom"
import axios from "axios"
import "./Archives.css"
const moment =require('moment')

const archives= function Archives(props:any) {
  let navigate = useNavigate()
const [arr,setArr]=useState([])
  useEffect(()=>{
    axios.get("/api/article").then((res)=>{
      setArr(res.data.data[0])
    })
  },[])  
  const handle=(item:any)=>{
    navigate(`/detail/${item.id}`,{
      state:{
        item
      }
    })
  }
  
  return (
    <div>
      
       <ul className='archivesList'>
         <div className='Header'>
         <h2 className='Title'>归档</h2>
         <p>共计{arr.length}篇</p>
         <hr />
         </div>
         <div className='mains'>
         <h2 className='year'>{moment().format('YYYY')}</h2>
         <div className='month'>{moment().format("MMM")}</div>
       {
        arr&&arr.length?arr.map((item:any,index)=>{
          return <li key={index} className="redbao" onClick={()=>{
            handle(item)
          }}> 
         {item.createAt.split("-")[1]}-{item.createAt.split("-")[2].split("T")[0]}
           &nbsp;
           <b>{item.title}</b>
           </li>
        }):<div></div>
      }      
         </div>
        </ul>
    </div>
  )
}

export default archives